﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>进度条</title>
    <!-- Jquery -->
    <script type="text/javascript" src="/jquery/1.12.4/jquery.min.js"></script>
    <!-- xhui -->
    <link rel="stylesheet" type="text/css" href="/xhui/css/xhui.css" />
    <script src="/xhui/js/xhui.js?v=1.004" type="text/javascript"></script>
</head>

<body>
    <dl style="margin:50px;">
        <dt>功能需求</dt>
        <dd>1、初始化的时候可以设置进度</dd>
        <dd>2、可以拖动进度条更改进度（进度更改完成后输出）</dd>
        <dd>3、可以点击进度条更改进度（进度更改完成后输出）</dd>
    </dl>

    <div id="testPro" style="width:300px; margin:50px;">
    </div>
</body>
</html>

<script type="text/javascript">
    $(function () {
        $("#testPro").xhProgress({
            init: 50,
            complate: function (s) {
                console.log(s);
            }
        });
    });
</script>